<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- SEO优化 -->
    <meta name="description" content="全栈开发工程师个人简历 - 专注于创建优雅的用户体验和高效的后端解决方案">
    <meta name="keywords" content="全栈开发,前端开发,后端开发,Vue,React,Node.js,个人简历">
    <meta name="author" content="小明">
    <title>程序员简历 | Developer Portfolio</title>

    <!-- *********请不要修改此处的引用********* -->
    <link rel="stylesheet" href="style.css">
    <!-- *********请不要修改此处的引用********* -->

    <!-- 使用云端CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- 使用自己的文件 -->
    <!-- <link rel="stylesheet" href="../css/all.min.css"> -->
</head>
<body>
    <!-- 自定义光标 -->
    <div class="cursor"></div>

    <!-- ************ 导航栏 ************ -->
    <nav>
        <div class="nav-logo">Portfolio</div>
        <ul class="nav-links">
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#skills">技能</a></li>
            <li><a href="#projects">项目</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>

    <!-- ************ 首页 ************ -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1>你好，我是<span class="highlight">小明</span></h1>
            <h2>全栈开发工程师</h2>
            <p>专注于创建优雅的用户体验和高效的后端解决方案</p>
            <a href="#contact" class="cta-button">联系我</a>
        </div>
        <div class="hero-image">
            <div class="gradient-circle"></div>
        </div>
    </section>

    <!-- ************ 关于 ************ -->
    <section id="about" class="about">
        <h2 class="section-title">关于我</h2>
        <div class="about-content">
            <div class="about-text">
                <p>我是一名充满激情的全栈开发者，拥有5年的开发经验。我热爱创造能够改善用户生活的产品。</p>
                <p>在我的职业生涯中，我参与过多个大型项目的开发，包括电商平台、企业管理系统等。</p>
            </div>
            <div class="about-stats">
                <div class="stat">
                    <h3>5+</h3>
                    <p>年开发经验</p>
                </div>
                <div class="stat">
                    <h3>50+</h3>
                    <p>完成项目</p>
                </div>
                <div class="stat">
                    <h3>30+</h3>
                    <p>客户好评</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ************ 技能 ************ -->
    <section id="skills" class="skills">
        <h2 class="section-title">技能专长</h2>
        <div class="skills-container">
            <div class="skill-card fade-in">
                <i class="fas fa-code"></i>
                <h3>前端开发</h3>
                <p>HTML5, CSS3, JavaScript</p>
                <p>React, Vue, Angular</p>
            </div>
            <div class="skill-card fade-in">
                <i class="fas fa-server"></i>
                <h3>后端开发</h3>
                <p>Node.js, Python, Java</p>
                <p>Express, Django, Spring</p>
            </div>
            <div class="skill-card fade-in">
                <i class="fas fa-database"></i>
                <h3>数据库</h3>
                <p>MySQL, MongoDB</p>
                <p>Redis, PostgreSQL</p>
            </div>
        </div>
    </section>

    <!-- ************ 项目 ************ -->
    <section id="projects" class="projects">
        <h2 class="section-title">项目展示</h2>
        <div class="projects-grid">
            <div class="project-card fade-in">
                <div class="project-image"></div>
                <h3>电商平台</h3>
                <p>基于React和Node.js的现代电商解决方案</p>
                <div class="project-links">
                    <a href="https://www.example.com" target="_blank" rel="noopener noreferrer" class="project-link">查看演示</a>
                    <a href="https://github.com/example" target="_blank" rel="noopener noreferrer" class="project-link">源代码</a>
                </div>
            </div>
            <div class="project-card fade-in">
                <div class="project-image"></div>
                <h3>企业管理系统</h3>
                <p>使用Vue和Spring Boot开发的管理系统</p>
                <div class="project-links">
                    <a href="https://www.example.com" target="_blank" rel="noopener noreferrer" class="project-link">查看演示</a>
                    <a href="https://github.com/example" target="_blank" rel="noopener noreferrer" class="project-link">源代码</a>
                </div>
            </div>
        </div>
    </section>

    <!-- ************ 联系 ************ -->
    <section id="contact" class="contact">
        <h2 class="section-title">联系我</h2>
        <div class="contact-container">
            <form id="contact-form">
                <input type="text" placeholder="您的姓名" required>
                <input type="email" placeholder="您的邮箱" required>
                <textarea placeholder="您的留言" required></textarea>
                <button type="submit" class="submit-btn">发送消息</button>
            </form>
            <div class="contact-info">
                <div class="info-item">
                    <i class="fas fa-envelope"></i>
                    <p>example@email.com</p>
                </div>
                <div class="info-item">
                    <i class="fas fa-phone"></i>
                    <p>+86 123 4567 8900</p>
                </div>
                <div class="social-links">
                    <a href="https://github.com/example" target="_blank" rel="noopener noreferrer"><i class="fab fa-github"></i></a>
                    <a href="https://linkedin.com/in/example" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin"></i></a>
                    <a href="https://twitter.com/example" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
        </div>
    </section>

    <!-- ************ 页脚 ************ -->
    <footer>
        <p>&copy; 2024 程序员简历. All rights reserved.</p>
    </footer>

    <!-- *********请不要修改此处的引用********* -->
    <script src="script.js"></script>
    <!-- *********请不要修改此处的引用********* -->

</body>
</html> 